<template>
    <div id="Double">
        <!--后退-->
        <img class="back"style=""src="../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
        <!--用户信息-->
        <div id="userInfo">
            <router-link to="/userCom" style="text-decoration:none;">
                <img style="width:3rem;height:3rem;border-radius:50%;" :src="showData.userModel.headPortrait" alt="">
            </router-link>
            <p style="font-size:0.9rem;">{{showData.userModel.nickName}}<img v-if="showData.userModel.sex==1" style="margin-left:0.3rem;height:0.8rem;width:0.8rem;"src="../../assets/homepage/male.png" alt=""><img v-if="showData.userModel.sex==2" style="margin-left:0.3rem;height:0.8rem;width:0.8rem;" src="../../assets/homepage/women.png" alt=""></p>
            <div class="stars">
                <img v-for="item in total" src="../../assets/tabber/starHav.png" alt="">
                <img v-for="item in untotal" src="../../assets/tabber/unstarHav.png" alt="">
            </div>
        </div>
        <!--联系方式-->
        <div id="way">
            <div>
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/call.png" alt="">
                <p @click="callphone()">电联</p>
            </div>
            <div>
                <p style="border-left:1px solid #9d9d9d;">
                <img style="width:2rem;height:2rem;" src="../../assets/homepage/msg.png" alt=""></p>
                <p @click="sendMsg">发短信</p>
            </div>
        </div>
        <!--用户详情-->
        <div id="userDe">
            <div class="commodity">
                <div  class="title">
                    <p style="font-size:1rem;color:#2aa095;">{{showData.amount}}<span>￥</span></p> 
                    <p>{{turnTime(showData.initiatorTime)}} <span>发布</span></p>
                    <p>{{showData.taskLocation}}</p>
                </div>
                <div class="content">
                        <div class="info">
                            <p>{{showData.taskExplain}}</p>
                        </div>
                         <div class="number" style="text-align:center">
                             <img v-if="showData.manSum==1"   src="../../assets/homepage/boy.png" alt="">
                             <img v-if="showData.womanSum==1" src="../../assets/homepage/gril.png" alt="">
                             <img v-if="showData.allSum==1"   src="../../assets/homepage/un.png" alt="">
                             <p v-if="showData.manSum==1"  >只限男生</p>
                             <p v-if="showData.womanSum==1">只限女生</p>
                             <p v-if="showData.allSum==1"  >男女不限</p>
                        </div>
                </div>
            </div>
        </div>
        <!--发布-->
        <button id="join"  @click="getTask">报名此兼职</button>
    </div>
</template>
<script>
import turnTime from '../../server/dataTime.js'
export default {
  data () {
    return {
        total:undefined,
        untotal:undefined,
        turnTime:turnTime,
        showData:{
            userModel:{
                headPortrait:undefined,
            }
        },
    }
  },
   created(){
     this.getDetailData()
  },
  methods:{
    getDetailData(){
          this.$api.getTaskDataDetail(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                  this.showData = res.data
                  this.total=this.showData.userModel.totalStar
                  this.untotal = 5-Number(this.total)
              }
          })
      },
     //   任务报名
    getTask(){
        this.$api.getTask(this.$route.params.id).then((res)=>{
              if(res.code=='000000'){
                    this.$router.push({
                        path: '/cueMsg',
                    })
                //   this.showData = res.data
              }
          })
    },
    callphone(){
        window.location.href = "tel:15259378193";
    },
    sendMsg(){
        window.location.href = "sms:15259378193";
    }
  }
}
</script>
<style>
#Double {
    height:100%;
    width:100%;
    background-size:100% 100%;
    background-image:url(../../assets/homepage/bg.png);
}
#Double .back{
    height:0.75rem;
    width:0.4rem;
    margin:0.9rem 0.6rem;
}
#Double #userInfo{
    margin:4vh auto;
    width:40%;
    text-align:center;
}
#Double #userInfo img:nth-child(n+3){
    width:0.8rem;
    height:0.8rem
}
#Double #userInfo .stars{
    width:80%;
    margin:0.5vh auto;
    display:flex;
    justify-content:space-between;
}
#Double #userInfo .stars > img{
    height:1rem;
    width:1rem;
}
#Double #way{
    width:70%;
    line-height:1.5rem;
    margin:0 auto;
    display:flex;
    font-size:0.6rem;
    color:#9d9d9d
}
#Double #way > div{
    width:50%;
    text-align:center;
}
#Double #userDe{
    margin:8% auto;
    width:93%;
}
#Double #userDe .commodity{
    background:#ffffff;
    width:100%;
    height:15rem;
    border:1px solid #c5aca0;
    border-radius:13px;
    padding:0.9rem 0.6rem;
}
#Double #userDe .commodity .title{
  height:0.8rem;
  line-height:0.8rem;
  display:flex;
  justify-content:space-between;
}
#Double #userDe .commodity .title p{
   font-size:0.8rem;
   color:#8e8e8e; 
}
#Double #userDe .commodity .content{
    margin:0.9rem 1rem 0px 2.15rem;
    font-size:0.45rem;
}
#Double #userDe .commodity .content .info{
    float:left;
    width:60%;
    height:6.25rem;
}
#Double #userDe .commodity .content .info p{
    font-size:0.8rem;
}
#Double #userDe .commodity .content .number{
    float:right;
    height:2rem;
    line-height:2rem;
    font-size:0.8rem;
    margin-left:0.8rem;
}
#Double #userDe .commodity .content .number img{
    height:1.7rem;
    width:2rem;
}

#Double #join{
    width:40%;
    height:2.5rem;
    margin:0 30%;
    background:#ffffff;
    border:1px solid #9d9d9d;
    font-size:0.8rem;
    color:#2aa095;
    border-radius:13px;
}
</style>
